<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSDN 首页</title>
    <link rel="stylesheet" href="./css/index.css" type="text/css">
    <script src="https://cdn.acwing.com/static/jquery/js/jquery-3.3.1.min.js"></script>
    <style>

        .login form {
            position: absolute; /* 使用绝对定位 */
            top: 50%; /* 将顶部位置设置为页面顶部的50% */
            left: 50%; /* 将左侧位置设置为页面左侧的50% */
            transform: translate(-50%, -50%); /* 使用transform属性来将元素水平和垂直居中 */
            max-width: 300px; /* 表单最大宽度为300像素 */
            padding: 20px; /* 设置内边距为20像素 */
            background-color: bisque;
            border-radius: 5px; /* 设置边框圆角为5像素 */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 设置阴影效果 */
            transition: all 0.3s; /* 添加过渡效果 */
        }

        .login input {
            width: 100%; /* 输入框宽度占满父元素 */
            padding: 10px; /* 设置内边距为10像素 */
            margin: 5px 0; /* 上下外边距为5像素，左右外边距为0 */
            border: 1px solid #ccc; /* 设置边框为1像素实线，颜色为灰色 */
            border-radius: 3px; /* 设置边框圆角为3像素 */
            box-sizing: border-box; /* 设置盒模型为边框盒模型 */
            cursor: url('../shubiao/pvscr1oll.cur'), auto;
        }
        .login button {
            padding: 10px 30px; /*设置按钮内边距*/
            background-color: #007bff; /* 设置按钮背景颜色 */
            color: white; /* 设置按钮文字颜色 */
            border: none; /* 移除按钮边框 */
            border-radius: 30px; /* 设置按钮边框圆角为椭圆形状 */
            cursor: pointer; /* 设置鼠标悬停时的指针样式 */
            outline: none; /* 移除焦点时的轮廓 */
            font-size: 20px; /* 设置字体大小 */
            margin-left: 32px;
            transition: background-color 0.3s; /* 添加过渡效果 */
            cursor: url('../shubiao/pwss1ize.cur'), auto;
        }

        .login button:hover {
            background-color: #0056b3; /* 设置悬停时的背景颜色 */
        }

        h2 {
            cursor: url('../shubiao/pvscr1oll.cur'), auto;
        }


    </style>
</head>

<body>


<div class="login">
    <form id="loginForm" onsubmit="return false;">
        <h2>登录</h2>
        <!-- 登录表单内容 -->
        <input type="text" id="logusername" placeholder="用户名">
        <input type="password" id="logpassword" placeholder="密码">
        <button onclick="login()">登录</button>
        <a href="#"><button type="button" onclick="showRegistrationForm()">注册</button></a>
    </form>

    <form id="registrationForm" style="display: none;" onsubmit="return false;">
        <!-- 注册表单内容 -->
        <h2>注册</h2>
        <input type="text" id="regUsername" placeholder="用户名">
        <input type="password" id="regPassword" placeholder="密码">
        <button onclick="register()">注册</button>
        <a href="#" ><button onclick="showLoginForm()">返回</button></a>
    </form>


    <div id="additionalOptions">
        <!-- 其他选项 -->
    </div>

    <div id="additionalOptionsLogin" style="display: none;">
        <!-- 登录时的其他选项 -->
    </div>

    <div id="additionalOptionsForgotPassword" style="display: none;">
        <!-- 找回密码时的其他选项 -->
    </div>
</div>

<script>
    
    // JavaScript函数

    function showRegistrationForm() {
        document.getElementById('registrationForm').style.display = 'block';
        document.getElementById('loginForm').style.display = 'none';
    }

    function showLoginForm() {
        document.getElementById('loginForm').style.display = 'block';
        document.getElementById('registrationForm').style.display = 'none';

    }

    var registeredUsernames = []; // 用于存储已注册用户名的数组

    function register() {
        var regUsername = document.getElementById('regUsername').value;
        var regPassword = document.getElementById('regPassword').value;

        // 检查用户名和密码是否为空
        if (regUsername.trim() === '' || regPassword.trim() === '') {
            alert('用户名和密码不能为空');
            return false; // 阻止表单的提交
        }

        // 检查用户名是否重复
        if (registeredUsernames.includes(regUsername)) {
            alert("该用户名已被使用，请重新选择一个用户名。");
            return false; // 阻止表单的提交
        }

        // 如果用户名不重复且用户名和密码都不为空，则进行注册
        registeredUsernames.push(regUsername); // 将新用户名添加到已注册用户名数组中
        console.log('注册的用户名：', regUsername);
        console.log('注册的密码：', regPassword);
        main(regUsername,regPassword,'register');
        // 在这里添加后端处理逻辑
        alert("登陆成功");
        showLoginForm();
        // 返回 true 表示注册成功，允许表单提交
        return true;
    }
    function login() {
        var regUsername = document.getElementById('logusername').value;
        var regPassword = document.getElementById('logpassword').value;
        // 检查用户名和密码是否为空
        if (regUsername.trim() === '' || regPassword.trim() === '') {
            alert('用户名和密码不能为空');
            return false; // 阻止表单的提交
        }
        main(regUsername,regPassword , 'login') .then(success => {
            if (success) {
                // 登录成功，执行你想要的操作
                window.location.href = "./index.html";
            } else {
                // 登录失败，执行你想要的操作
                alert('登录失败');
            }
        });
    }

    async function main(regUsername,regPassword,type){
   
        let data = { username: regUsername, password: regPassword, type: type };
        
        try {
            const response = await fetch('http://localhost:8080/' + type, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json; charset=utf-8'
                },
                body: JSON.stringify(data)
            });
            if (!response.ok) {
                throw new Error('Failed to fetch data');
            }
            const data_1 = await response.json();
            if(data_1["success"]==true)return true;
            else return false;
        } catch (error) {
            console.error('Failed to fetch data:', error);
            return false;
        }
    }
    // function sendPasswordResetEmail() {
    //     var email = document.getElementById('email').value;
    //     // 发送重置密码邮件的逻辑将在后端实现
    //     console.log('发送重置密码邮件至邮箱：', email);
    // }
</script>

    <!-- 获取文章简介
    <script type="module">
        import { main } from "./js/index.js";
       
        let count = 5;  // 需要的文章个数，可有可无
        main(count);
    </script>
    <div class="container"></div>

    <div class="footer">
        <p>&copy; 2024 CSDN. All rights reserved.</p>
    </div> -->

</body>

</html>